import React, { Component , Fragment } from 'react'
import {withRouter} from 'react-router-dom'
import SubGoodsItem from './SubGoodsItem'
import './subGoodsList.css'

import axios from 'axios'

// import {getSubList} from '../../api/api'
class SubGoodsList extends Component{
    constructor(props) {
        super(props);
        this.state = {
            tabs:[
                {tabName:"销量",id:1},
                {tabName:"新品",id:2},
            ],
            currentIndex:1,
            fruitsItem:[],
            fruitsItemByNew:[]
        }
    }

    tabChoiced=(id)=>{
        //tab切换到方法
        this.setState({
            currentIndex:id
        });
    }

    componentDidMount(){
        this.setState({
            fruitsName:this.props.location.query
        })
        // console.log(this.props)
        axios.post('http://localhost:3000/api/querybycate',{
            params:{
                fruitsName:this.props.location.query
            }
        }).then(res=>{
            this.setState({
                fruitsItem:[...res.data.message]
            })
        })
        axios.post('http://localhost:3000/api/querybynew',{
            params:{
                fruitsName:this.props.location.query
            }
        }).then(res=>{
            this.setState({
                fruitsItemByNew:[...res.data.message]
            })
        })
    }

    getHotFruits=()=>{
        if(this.state.fruitsItem.length>0){
            return this.state.fruitsItem.map((item,index)=>{
                return (
                    <SubGoodsItem 
                        id={item.goods_id}
                        key={index}
                        pic={item.goods_thumb}
                        title={item.goods_long_title}
                        describe={item.goods_description}
                        discount = {item.goods_discount}
                        now_price={item.goods_now_price}
                        prev_price={item.goods_prev_price}
                        format={item.goods_format}
                    />
                )
            })
        }else{
            return (
                <div>
                    <img style={{'textAlign':'center','width':'50%'}} src='https://img07.yiguoimg.com/d/web/180315/013111/212501/noting@3x.png' alt='' />
                    <p style={{'color':'#11B57C','textAlign':'center'}}>该地区暂时没有您想要的水果哦！</p>
                </div>
            )
        }
    }

    getNewFruits=()=>{
        if(this.state.fruitsItemByNew.length>0){
            return this.state.fruitsItemByNew.map((item,index)=>{
                return (
                    <SubGoodsItem 
                        id={item.goods_id}
                        key={index}
                        pic={item.goods_thumb}
                        title={item.goods_long_title}
                        describe={item.goods_description}
                        discount = {item.goods_discount}
                        now_price={item.goods_now_price}
                        prev_price={item.goods_prev_price}
                        format={item.goods_format}
                    />
                )
            })
        }else{
            return (
                <div>
                    <img style={{'textAlign':'center','width':'50%'}} src='https://img07.yiguoimg.com/d/web/180315/013111/212501/noting@3x.png' alt='' />
                    <p style={{'color':'#11B57C','textAlign':'center'}}>该地区暂时没有您想要的水果哦！</p>
                </div>
            )
        }
    }

    render(){
        // console.log(this.props)
        var _this=this;
        var isBox1Show=this.state.currentIndex===1 ? 'block' : 'none';
        var isBox2Show=this.state.currentIndex===2 ? 'block' : 'none';
        var tabList= this.state.tabs.map(function(res,index) {
            // 遍历标签页，如果标签的id等于tabid，那么该标签就加多一个active的className
          var tabStyle=res.id===this.state.currentIndex ? 'sub-ctrl currented' : 'sub-ctrl';

          return    <li key={index} onClick={this.tabChoiced.bind(_this,res.id)} className={tabStyle}>{res.tabName}</li>

      }.bind(_this));
        return(
            <Fragment>
                <ul className='sub-tab'>
                    {tabList}
                </ul>
                <div className='sub-container'>
                    <div style={{"display":isBox1Show}} >
                        {this.getHotFruits()}
                    </div>
                    <div style={{"display":isBox2Show,'height':'300px'}} >
                        {this.getNewFruits()}
                    </div>
                </div>
            </Fragment>
        )
    }
}


export default withRouter(SubGoodsList)